<template>
	<view>
		<u-navbar back-text="" back-icon-color="#000000" title="签到" :border-bottom="false" title-color="#000000" :background="background"></u-navbar>
		<view class="top">
			<!-- <view class="title">
				<view class="name">
					签到累计金蜜(Kmb)
				</view>
				<view class="number">
					{{gdb_number}}
				</view>
			</view>
			<view class="icon" @click="signIn()">
				<image src="../static/a1.png" mode=""></image>
				<view class="text">
					每日签到
				</view>
			</view> -->
		</view>
		<view class="content">
			<view class="fun">
				<view class="top"></view>
				<view class="imgbox">
					<image src="../static/goldBee.png"></image>
				</view>
				<view class="con_title">
					<view class="item">
						<view class="item_1">累计蜜贝(Fmb)</view>
						<view class="item_2 color1">{{gdb_number}}</view>
					</view>
					<view class="item">
						<view class="item_1">本周签到(天)</view>
						<view class="item_2 color2">{{count}}</view>
					</view>
				</view>
				<view class="con_box">
					<view class="item" v-for="(item,index) in dataList" :key="index"  >
						<view class="item_bg" :class="[day_number== index + 1 ?'activebg1':'',item.status==1 ?'activebg':'']" >
							 <view class="name active" >{{item.name}}</view>
							 <view class="number active">+{{item.number}}</view>

							 <view class="img1" v-if="index + 1 == 7">
								 <image src="../static/goldBees.png" v-if="item.status==1 || day_number== index + 1"></image>
								 <image src="../static/goldBees.png" v-else></image>
							 </view>
							 <view class="img" v-else>
								 <image src="../static/goldBee.png" v-if="item.status==1 || day_number== index + 1"></image>
								 <image src="../static/goldBee.png" v-else></image>
							 </view>

						</view>

					</view>
				</view>
				<view class="botton_box">
					<view class="botton" @click="signIn()">立即签到</view>
				</view>
				<!-- <view class="title">
					本周已签到 <text>{{count}}</text> 天
				</view>
				<view class="text">
					每日签到送金蜜，金蜜多多乐趣多多
				</view> -->
				<!-- <view class="down">
					<view :class="item.status==1?'list active':'list'" v-for="(item,index) in dataList" :key="index">
						<view class="icon">
							+{{item.number}}
						</view>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</view> -->
			</view>
			<view class="title">
				<view class="up">
					新手教程
				</view>
				<view class="down">
					新手教程帮助你快去了解软件，还送<text>蜜贝</text>哦
				</view>
			</view>
			<view class="task">
				<view class="list" v-for="(item,index) in task" :key="index">
					<image :src="img_pre+item.icon" class="icon"></image>
					<view class="cont">
						<view class="name">
							{{item.name}}
						</view>
						<view class="text">
							+{{item.give_number}} 蜜贝 <image src="../static/a5.png"></image>
						</view>
					</view>
					<u-button :hairLine="false" :class="item.study_status==1?'go ok':'go'" @click="toPage('details?eng_name='+item.eng_name+'&study_id='+item.study_id)"
					 shape="circle" :disabled="item.status" :ripple="true">{{item.study_status==1?'已学习':'去学习'}}</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#FDF4ED'
				},
				dataList: [],

				task: [],
				count: "",
				gdb_number: "",
				day_number:'',
			}
		},
		onLoad(option) {
			than = this;
			this.test()
			than.signInList();

		},
		onShow() {
			than.post("api/study/studyList", null, function(data) {
				than.task = data;
			})
		},
		methods: {
			test(){
				var d = new Date().getDay();
			    than.day_number = d
			},
			signInList() {
				than.post("api/study/signInList", null, function(data) {
					for (let i in data.list) {
						data.list[i].name = than.getNname(i)
					}
					than.dataList = data.list;
					than.count = data.count
					than.gdb_number = data.gdb_number
				})
			},
			signIn() {
				/* than.toast("敬请期待")
				return false; */
				than.post("api/study/signIn", null, function(data) {
					than.signInList();
				})
			},
			toSign() {
				than.dataList[this.$u.random(0, 6)].type = true;
			},
			getNname(i) {
				var name;
				switch (parseInt(i)) {
					case 0:
						name = "周一"
						break;
					case 1:
						name = "周二"
						break;
					case 2:
						name = "周三"
						break;
					case 3:
						name = "周四"
						break;
					case 4:
						name = "周五"
						break;
					case 5:
						name = "周六"
						break;
					case 6:
						name = "周日"
						break;
					default:
						name = ""
						break;
				}
				return name;
			}
		}
	}
</script>

<style lang="less">
	.top {
		position: relative;
		height: 260rpx;
		background:#FDF4ED;
		display: flex;
		padding: 0 36rpx;

		.title {
			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.number {
				font-size: 80rpx;
				font-family: DINCond-Black;
				font-weight: bold;
				color: #333333;
			}
		}

		.icon {
			margin-top: 40rpx;
			margin-left: auto;
			display: flex;
			align-items: center;
			height: 67rpx;
			padding: 0 15rpx;
			background: linear-gradient(90deg, #2F2B1C, #615633);
			border-radius: 34rpx;

			image {
				width: 37rpx;
				height: 37rpx;
				margin-right: 8rpx;
			}

			.text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.content {
		// background: #F4F4F7;
		// border-radius: 70rpx 0px 0px 0px;
		margin-top: -100rpx;
		position: relative;
		z-index: 1;
		padding: 0 39rpx 48rpx;

		.task {
			background: #FFFFFF;
			margin-top: 24rpx;
			border-radius: 20rpx;

			.list {
				padding: 0 24rpx;
				height: 145rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 68rpx;
					height: 68rpx;
				}

				.cont {
					margin-left: 24rpx;

					.name {
						margin-bottom: 10rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFC31E;
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.go {
					color: #FFFFFF;
					margin-left: auto;
					width: 127rpx;
					height: 55rpx;
					font-size: 24rpx;
					// background: #FFC31E;
					background: linear-gradient(-90deg, #FFB456, #FE8657);
					box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(255, 180, 86, 0.6);
					margin-right: 0;
					border: 0;
				}

				.ok {
					color: #666666 !important;
					background: #F4F4F7 !important;
				}
			}
		}

		.fun {
			position: relative;
			top: -50rpx;
			left: 0;
			right: 0;
			width: 678rpx;
			// height: 284rpx;
			padding-bottom:40rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: auto;
			.top{
				height: 26rpx;
				background-color: #F66337;
				border-radius:20rpx  20rpx 0rpx 0rpx;
			}
			.imgbox{
				position:absolute;
				width: 160rpx;
				height: 160rpx;
				border-radius:50%;
				left: 0;
				right: 0;
				margin: auto;
				top:-80rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.con_title{
				display: flex;
				margin-top: 50rpx;

				.item{
					flex: 1;
					text-align: center;
					.item_1{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					.item_2{
						font-size: 60rpx;
						font-family: Myriad Pro;
						font-weight: 400;
					}
					.color1{
						color:#205FFA;
					}
					.color2{
						color:#F66337;
					}
				}
			}
			.con_box{
				display: flex;
				flex-wrap: wrap;
				padding:0rpx 20rpx;
				.item:nth-child(1){
					margin-left: 0rpx;
				}.item:nth-child(5){
					margin-left: 0rpx;
				}
				.item:last-child{
					width:calc(100%/2 - 12rpx);
				}

				.item{
					margin-top: 20rpx;
					box-sizing: border-box;
					text-align: center;
					background-color: #F6F7FB;
					border-radius: 10rpx;
					margin-left: 20rpx;
					width:calc(100%/4 - 18rpx);

					.name{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 46rpx;
					}
					.number{
						font-size: 26rpx;
						font-family: DIN;
						font-weight: 500;
						color: #666666;
					}
					.img{
						margin-top: 10rpx;
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}
					.img1{
						margin-top: 10rpx;
						image{
							width: 73rpx;
							height: 44rpx;
						}
					}
					.item_bg{
						padding:10rpx 0rpx;
						border-radius: 10rpx;
					}
					.activebg{
						background-color: #FDF4ED !important;
						border: 1px solid #F46813 !important;
						.active{
							color: #F46813 !important;
						}
					}
					.activebg1{
						background-color: #F66337;
						border:none;
						.active{
							color:white;
						}
					}

				}



			}
			.botton_box{
				margin-top:40rpx;
				.botton{
					width: 314rpx;
					height: 80rpx;
					background: linear-gradient(-90deg, #FFB456, #FE8657);
					box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(255, 180, 86, 0.6);
					border-radius: 40rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height:80rpx ;
					margin: auto;
                   font-size: 32rpx;
				}
			}

			// .title {
			// 	padding: 0 25rpx;
			// 	height: 80rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	font-size: 24rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: bold;
			// 	color: #333333;
			// 	line-height: 1;

			// 	text {
			// 		font-size: 48rpx;
			// 		font-family: PingFang SC;
			// 		font-weight: bold;
			// 		color: #F46813;
			// 		margin: -15rpx 10rpx 0;
			// 	}
			// }

			// .text {
			// 	padding: 0 26rpx;
			// 	font-size: 24rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: 500;
			// 	color: #999999;
			// 	line-height: 1;
			// }

			// .down {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	height: 180rpx;

			// 	.active {
			// 		.icon {
			// 			background: #F46813 !important;
			// 			color: #FFFFFF !important;
			// 		}

			// 		.name {
			// 			color: #F46813 !important;
			// 		}
			// 	}

			// 	.list {
			// 		width: 14%;
			// 		text-align: center;

			// 		.icon {
			// 			margin: auto;
			// 			width: 66rpx;
			// 			height: 66rpx;
			// 			background: #F4F4F7;
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: center;
			// 			border-radius: 50%;
			// 			color: #666666;
			// 		}

			// 		.name {
			// 			font-size: 22rpx;
			// 			font-family: PingFang SC;
			// 			font-weight: 500;
			// 			color: #666666;
			// 		}
			// 	}
			// }
		}

		.title {
			// padding-top: 280rpx;

			.up {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.down {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				text {
					color: #F46813;
				}
			}
		}
	}

	page {
		background: #F4F4F7;
	}
</style>
